School
Work
At their core:
We should be concerned with:
Frame communication around these
mygraph.dot
Generate a PNG
Scale the PNG
Export to SVG
digraph g {
client [label="client"]
load_balancer [label="load\nbalancer"]
server [label="server"]
db [shape="cylinder" label="db"]
files [shape="folder" label="file\nbucket"]
client -> load_balancer [label="request"]
load_balancer -> server [label="route"]
server -> {
files
db
} [label="request"]
}Structure Narrative
digraph G {
rankdir="LR"
ratio=auto
ranksep=auto
label="Sculpting Supply Store"
labelloc="t"
// Nodes
subgraph cluster_supply_chain {
label="Supply Chain"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#E5F5FD"
subgraph cluster_raw_materials {
label="Raw Materials"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
mine [label="Mine"]
}
subgraph cluster_clay_supply {
label="Clay"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
clay_supplier [label="Clay\nSupplier"]
}
subgraph cluster_tool_supply {
label="Tools"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
tool_manufacturer [label="Tool\nManufacturer"]
tool_supplier [label="Tool\nSupplier"]
tool_manufacturer -> tool_supplier [label="Provides"]
}
mine -> tool_manufacturer [label="Provides"]
}
subgraph cluster_store {
label="Store"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#E5F5FD"
subgraph cluster_inventory {
label="Inventory"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
clay_inventory [label="Clay\nInventory"]
tool_inventory [label="Tool\nInventory"]
}
subgraph cluster_staff {
label="Staff"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
clerk [label="Clerk"]
general_manager [label="General\nManager"]
general_manager -> clerk [label="supports"]
}
}
// Edges
mine -> clay_supplier [label="Provides"]
clay_supplier -> clay_inventory [label="Restocks"]
tool_supplier -> tool_inventory [label="Restocks"]
clerk -> clay_inventory [label="Manages"]
clerk -> tool_inventory [label="Manages"]
general_manager -> clay_supplier [label="Coordinates\nwith"]
general_manager -> tool_supplier [label="Coordinates\nwith"]
}digraph G {
rankdir="BT"
ratio=1
ranksep=auto
label="Sculpting Supply Store"
labelloc="t"
// Nodes
subgraph cluster_supply_chain {
label="Supply Chain"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#E5F5FD"
subgraph cluster_raw_materials {
label="Raw Materials"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
mine [label="Mine"]
}
subgraph cluster_clay_supply {
label="Clay"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
clay_supplier [label="Clay\nSupplier"]
}
subgraph cluster_tool_supply {
label="Tools"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
tool_manufacturer [label="Tool\nManufacturer"]
tool_supplier [label="Tool\nSupplier"]
tool_manufacturer -> tool_supplier [label="Provides"]
}
mine -> tool_manufacturer [label="Provides"]
}
subgraph cluster_store {
label="Store"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#E5F5FD"
subgraph cluster_inventory {
label="Inventory"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
clay_inventory [label="Clay\nInventory"]
tool_inventory [label="Tool\nInventory"]
}
subgraph cluster_staff {
label="Staff"
style=rounded
style=filled
pencolor="#AEB6BE"
bgcolor="#EBF3E7"
clerk [label="Clerk"]
general_manager [label="General\nManager"]
general_manager -> clerk [label="supports"]
}
}
// Edges
mine -> clay_supplier [label="Provides"]
clay_supplier -> clay_inventory [label="Restocks"]
tool_supplier -> tool_inventory [label="Restocks"]
clerk -> clay_inventory [label="Manages"]
clerk -> tool_inventory [label="Manages"]
general_manager -> clay_supplier [label="Coordinates\nwith"]
general_manager -> tool_supplier [label="Coordinates\nwith"]
}CSS
SCSS
Source: SCSS Documentation
import React from 'react';
import {StyleSheet, Text} from 'react-native';
import {
SafeAreaView,
SafeAreaProvider
} from 'react-native-safe-area-context';
const App = () => (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<Text style={styles.title}>React Native</Text>
</SafeAreaView>
</SafeAreaProvider>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: '#eaeaea',
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: '#20232a',
borderRadius: 6,
backgroundColor: '#61dafb',
color: '#20232a',
textAlign: 'center',
fontSize: 30,
fontWeight: 'bold',
},
});
export default App;Source: React Native Docs - Stylesheet
VSCode Open Configure Snippets
VSCode Open Snippets File
VSCode Snippet Graph Template
VSCode Snippet Cluster Colors
Add to
Obsidian Inline Graphviz
Obsidian Community Plugins - Graphviz
Obsidian Graph View
Obsidian Graph View - Filtered to Tag
Obsidian Inline Mermaid